<template>
    <div class="details-wrap">
        <!-- 客户信息 -->
        <div class="customer-info">
            <!-- header -->
            <div class="title">
                <div class="fl">
                    <span></span>
                    <span></span>
                </div>
                <p>客户信息</p>
            </div>
            <div class="content">
                <van-field
                v-model="carInfo.carNum"
                label="号牌号码"
                input-align="right"
                placeholder="请输入您的号牌号码"
                maxlength="10"
                @click="carNumInput"
                readonly 
                />
                <van-field
                v-model="carInfo.username"
                label="客户姓名"
                input-align="right"
                placeholder="请输入办理人的姓名"
                maxlength="4"
                />
                <van-field
                v-model="carInfo.mobile"
                type="tel"
                input-align="right"
                placeholder="请输入您的手机号"
                label="手机号码"
                />
                <van-field
                v-model="carInfo.code"
                label-align="right"
                input-align="right"
                type="number"
                clearable
                placeholder="请输入4位短信验证码"
                class="card-cell-validation"
                maxlength="4"
                >
                    <span class="fl" slot="label">验证码</span>

                    <van-button
                        slot="label"
                        size="small"
                        color="#ea4d18"
                        type="primary"
                        class="validation"
                        @click="sendVerifyCode"
                    >
                        <Countdown ref="Countdown" class="times"></Countdown>
                    </van-button>
                </van-field>
            </div>
        </div>
        <!-- 车辆信息 -->
        <!-- <div class="customer-info bg-fff">
            <div class="title">
                <div class="fl">
                    <span></span>
                    <span></span>
                </div>
                <p>车辆信息</p>
            </div>
            <div class="content">
                <div class="special color">
                    <p class="t-name">车辆类别</p>
                    <van-radio-group v-model="carInfo.orderType" direction="horizontal" class="radioFlex">
                        <van-radio
                        shape="square"
                        checked-color="#ea4d18"
                        icon-size="16px"
                        :name="val.value"
                        v-for="val in carTypes"
                        :key="val.name"
                        >
                            <span style="font-size:16px">{{ val.name }}</span>
                        </van-radio>
                </van-radio-group>
                </div>
                
            </div>
        
        </div> -->
    
        <van-button color="#27b5a7" class="btn-submit" :loading="loading" type="primary" @click="addCars" block>提交</van-button>
        <foot :navUrl="url"/>
        <!--键盘弹出-->
        <van-popup v-model="showInputCarNumber" position="bottom">
            <plateNumber @getPlateLicense="getPlateLicense"></plateNumber>
        </van-popup>
    </div>
</template>

<script>
import Countdown from '@/components/countdown/index'
import plateNumber from '@/components/plateNumber/index'
import { getLocal } from '@/utils/storage'
import foot from '@/views/footer.vue'
export default {
    name: 'vehicleDetails',
    data() {
        return {
            carInfo: {
                userId: null,
                carNum:null,
                username:null,//客户姓名
                mobile:null,//手机号码
                orderType:null,//类别
                code:null,//验证码
                stationId:1,//
            },
            showInputCarNumber:false,
            loading:false,
            carTypes:[{value:2,name:'客车'},{value:1,name:'货车'},{value:3,name:'新车'},{value:4,name:'变更车辆'},{value:5,name:'事故车辆'}],
            url:'/'
        }
    },
    computed: {
        
    },
    created() {
        console.log(this.$route, '----  编辑状态进入 车辆详情 --------')
        if (this.$route.params.carUser) {
            this.carInfo.userId = this.$route.params.carUser.id
            this.carInfo.orderType = this.$route.params.type
        }else{
            this.$router.push('/')
        }
    },
    methods: {
        carNumInput(){
            this.showInputCarNumber = true
        },
        getPlateLicense(data){
            console.log('组件传出的data',data)
            this.carInfo.carNum = data
            this.showInputCarNumber = false
        },
        // 提交
        async addCars() {
            console.log(
                this.carInfo,
                this.agreementChecked,
                '------------- this.carInfo-----------'
            )
            let res = null
            if (this.validationFn()) {
                return
            }else{
                this.loading = true
                let res = await this.$api.createInspectionOrder(this.carInfo)
                this.loading = false
                console.log('res--------------',res)
                if (res.status === 200) {
                    this.$toast(res.message)
                    //this.$router.push('/')
                    this.$router.push({
                        name: 'orderPay',
                        params: {
                            carInfo: res.data
                        }
                    })
                }
            }
        },
        // 发送短信验证码
        async sendVerifyCode() {
            if (!this.$refs.Countdown.countNum) {
                let res = await this.$api.sendVerifyCode({
                phone: this.carInfo.mobile
                })
                if (res.status === 200) {
                this.$refs.Countdown.countDown(true, 60)
                }
                console.log(res, '------------------- 发送短信验证码 ----------------')
            } else {
                this.$toast('不能重复发送验证码')
            }
        },
        // -------------------------------------提交验证---------------------------------
        validationFn() {
            let c = this.carInfo
            console.log(c, '----验证')
            let s = '信息不正确！'

            if (this.carInfo.username === '' || this.carInfo.username === null) {
                this.$toast('姓名' + s)
                return true
            }
            if (this.carInfo.code === '' || this.carInfo.code === null) {
                this.$toast('验证码' + s)
                return true
            }
            if (this.carInfo.orderType === '' || this.carInfo.orderType === null) {
                this.$toast('检测类别' + s)
                return true
            }
        }
    },
    components: {
        Countdown,
        foot,
        plateNumber
    }
}
</script>

<style lang="less" scoped>
    
    .sum{
        position: absolute;
        right: 1rem;
        top:calc(44px * 3.5);
        z-index: 999;
        line-height: 44px;
        font-size: 0.4rem;
        transform: translateY(-50%);
    }
    .errorColor{
        color:red;
        border-bottom: 1px solid red!important;
    }
    //提示
    .prompt{
        font-size: 0.35rem;
        text-align: center;
        color:red;
        position: fixed;
        left: 0;
        top:0;
        width: 100%;
        z-index: 999;
        background-color: #efefef;
        line-height: 1rem;
    ;
    }

    .details-wrap {
        background-color: #f0f0f0;
        padding-bottom: 0.48rem;
        // 最小字体
        .small-font {
            font-size: 0.16rem;
            transform: scale(0.83, 0.83);
            -webkit-text-size-adjust: 100%;
        }
        .title {
            height: 1.12rem;
            background-color: #f0f0f0;
            div {
                margin: 0.333rem 0 0 0.2rem;
                span {
                    width: 0.133rem;
                    height: 0.533rem;
                    background-color: #fff;
                    display: inline-block;
                }
                span:nth-of-type(2) {
                    background-color: #009a44;
                }
            }
            p {
                font-size: 0.587rem;
                color: #000;
                height: inherit;
                line-height: 1.22rem;
                text-indent: 0.227rem;
                i{
                    font-size: 0.35rem;
                }
            }
        }
        /deep/ .van-uploader,
        /deep/ .van-uploader .van-uploader__wrapper,
        /deep/ .van-uploader .van-uploader__input-wrapper {
            width: 100%;
        }
        // 客户信息
        .customer-info {
            .van-cell {
                border-bottom: 1px solid #bbb;
            }

            .content {
                .van-cell {
                height: 1.147rem;
                line-height: 1.147rem;
                padding: 0 16px;
                /deep/ .van-field__control {
                    height: 1.147rem;
                    line-height: 1.147rem;
                }
                /deep/ .van-cell__title {
                    span {
                        font-size: 0.48rem;
                    }
                }
            }
            // 验证码
            .card-cell-validation {
                /deep/ .van-cell__title {
                    width: 52%;
                    display: flex;
                }
                .validation {
                    margin-left: 0.2rem;
                    height: 0.667rem;
                    line-height: 0.667rem;
                    vertical-align: middle;
                    padding: 0 4px;
                    min-width: auto;
                    border-radius: 0.107rem;
                    border: 0;
                    margin-top: 0.2rem;
                    /deep/ .times {
                        // .small-font;
                        font-size: 0.32rem;
                    }
                }
            }
        }
    }
    // 车辆信息
    .customer-info {
        .content {
            .special {
                padding: 0.187rem 0.333rem;
                border-bottom: 1px solid #cacaca;
                .t-name {
                    font-size: 0.493rem;
                    line-height: 0.72rem;
                    margin-bottom: 0.24rem;
                }
            }
            .color {
                .van-radio-group{
                    display: flex;
                    flex-wrap: wrap;
                }
                .van-radio {
                    margin-right: 1.067rem;
                    margin-bottom: 0.3rem;
                }
                /*  .van-radio:nth-of-type(5n + 0) {
                    //margin-right: 0;
                    } */
            }
            .drive-form {
                .van-radio {
                    margin-right: 1.36rem;
                    margin-bottom: 0.3rem;
                }
                /* .van-radio:nth-of-type(3n + 0) {
                margin-right: 0;
                } */
            }
            .fuel {
                .van-radio {
                    margin-right: 1.067rem;
                    margin-bottom: 0.3rem;
                }
                /* .van-radio:nth-of-type(4n + 0) {
                margin-right: 0;
                } */
            }

        }
    }

    .btn-submit {
        width: 80%;
        font-size: 0.64rem;
        letter-spacing: 1.093rem;
        border-radius: 0.16rem;
        margin: 20% auto 0;
        background-color: rgb(234, 77, 24);
        border: 0;
        span {
            margin-left: 15%;
        }
    }
}
</style>
